﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <a href="http://javascriptissexy.com/understand-javascript-closures-with-ease/">Closures in JS</a>
</head>
<body>
    <div>
        <strong>What is a closure?</strong><br />
        A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain (and function parameters). The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables. 
    </div>
    <h4>Closures’ Rules and Side Effects</h4>
    <ul>
        <li>Closures have access to the outer function’s variable even after the outer function returns</li>
        <li>Closures store references to the outer function’s variables; they do not store the actual value.</li>
    </ul>
</body>
</html>
<script>
    function showName(firstName, lastName) {
        var nameIntro = "Your name is ";
        // this inner function has access to the outer function's variables, including the parameter
        function makeFullName() {
            return nameIntro + firstName + " " + lastName;
        }
        return makeFullName();
    }
    showName("Michael", "Jackson"); // Your name is Michael Jackson



    //problemas
    // This example is explained in detail below (just after this code box).
    function celebrityIDCreator(theCelebrities) {
        var i;
        var uniqueID = 100;
        for (i = 0; i < theCelebrities.length; i++) {
            theCelebrities[i]["id"] = function () {
                return uniqueID + i;
            };
        }
        return theCelebrities;
    }
    var actionCelebs = [{ name: "Stallone", id: 0 }, { name: "Cruise", id: 0 }, { name: "Willis", id: 0 }];
    var createIdForActionCelebs = celebrityIDCreator(actionCelebs);
    var stalloneID = createIdForActionCelebs[0]; //a cada celebrity le pone en el campo id una funcion, no un valor
    console.log(stalloneID.id()); // 103: esto es porque se ejecuta la funcion id luego de q se creo todo el array, debería ser una property, no una funcion


    //version corregida
    function celebrityIDCreator(theCelebrities) {
        var i;
        var uniqueID = 100;
        for (i = 0; i < theCelebrities.length; i++) {
            theCelebrities[i]["id"] = function () {
                return uniqueID + i;
            }(); // immediately invoke the function passing the i variable as a parameter
        }
        return theCelebrities;
    }

    var actionCelebs = [{ name: "Stallone", id: 0 }, { name: "Cruise", id: 0 }, { name: "Willis", id: 0 }];
    var createIdForActionCelebs = celebrityIDCreator(actionCelebs);
    var stalloneID = createIdForActionCelebs[0];
     console.log(stalloneID.id); // 100
    var cruiseID = createIdForActionCelebs[1];     console.log(cruiseID.id); // 101
</script>
